<template>
  <div :id="id"></div>
</template>
<script>
import * as echarts from "echarts";
import mixins from "./mixins";
export default {
  name: "echart-column",
  props: {
    id: [String],
    setDeepData: [Function],
    columnDataItem:[Object]
  },
  mixins:[mixins],
  watch: {},
  mounted() {
    this.renderEchart();
    console.log(this.columnDataItem);
  },
  computed: {},
  data() {
    return {
      params: null,
      option: {
        title:this.columnDataItem?.contextTitle,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.columnDataItem.xData || [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: this.columnDataItem.yData || [],
          },
        ],
      },
      innerHeight: 0,
      innerWidth: 0,
    };
  },

  methods: {
    goDetail() {},
    showDeep() {},
    renderEchart() {
      let echartColumnDom = document.getElementById(this.id);
      let myChart = echarts.init(echartColumnDom);
      //去除默认的鼠标事件
      document.oncontextmenu = function () {
        return false;
      };
      // myChart.off('contextmenu')
      //新加上鼠标右击事件
      // myChart.on('contextmenu', 'xAxis', function(params) {
      // console.log(params)
      // })
      document.onclick = function name(params) {
        var menu = document.getElementById("menus");
        menu.style.display = "none";
      };
      let that = this;
      myChart.on("contextmenu", function (params) {
        console.log(params);
        var oEvent = params.event;
        that.$emit("setDeepData", params);
        var menu = document.getElementById("menus");
        menu.style.display = "block";
        menu.style.position = "absolute";
        menu.style.background = "#fff";
        // //让自定义菜单随鼠标的箭头位置移动
        let innerHeight, innerWidth, left, top;
        innerHeight = window.innerHeight;
        innerWidth = window.innerWidth;
        if (oEvent.event.screenX - 64 < 0) {
          left = 0;
        } else if (oEvent.event.screenX + 64 > innerWidth) {
          left = innerWidth - 64;
        } else {
          left = oEvent.event.screenX;
        }
        if (oEvent.event.clientY - 72 < 0) {
          top = 0;
        } else if (oEvent.event.clientY + 72 > innerHeight) {
          top = innerHeight - 72;
        } else {
          top = oEvent.event.clientY;
        }
        menu.style.left = left + "px";
        menu.style.top = top - 20 + "px";
      });
      myChart.setOption(this.option);
      this.pushChartSheet(myChart,this.option)
    },
  },
};
</script>

<style scoped lang="scss"></style>
